<template>
	<view class="row-wrap">
		<view class="p-t-b-10" :style="'width:' +view_width+  '%;'" v-for="(item, index) in list" :key="index">
			<view class="t-c" @click="confirm(index,item)">
				<image
					:style="'width:'+ icon_size + 'rpx;height:' + icon_size +'rpx;border-radius:'+ icon_radius +'rpx'"
					:src="item.icon|getImg"></image>
				<view>
					<text :style="'color: '+Color +';font-size: '+size +'rpx;font-weight: 800;'">{{item.name}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// * @property {String}  Color 字体颜色
	// * @property {Number}  size 字体大小
	// * @property {Boolean}  is_init ajax内容是否加载完成
	export default {
		name: 'navigation',
		props: {
			Color: {
				type: String,
				default: '#333'
			},
			icon_size: {
				type: Number,
				default: 80
			},
			icon_radius: {
				type: Number,
				default: 96
			},
			size: {
				type: Number,
				default: 26
			},
			//每排数量
			num: {
				type: Number,
				default: 4
			},
			list: {
				type: Array,
				default: []
			},
		},
		watch: {
			num: {
				handler: function(val) {
					this.view_width = 100 / val;
				},
				immediate: true
			},
		},
		data() {
			return {
				is_loading: true,
				view_width: '',
			}
		},
		methods: {
			confirm(index, item) {
				this.$emit('confirm', index, item)
			}
		},

	}
</script>

<style>
	.row-wrap {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.row-wrap-img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 96rpx;
	}
</style>